<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link href="/ajax/libs/jquery-layout/jquery.layout-latest.css" th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link href="/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css" th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<body class="gray-bg">
	<div class="ui-layout-west">
		<div class="main-content">
			<div class="box box-main">
				<div class="box-header">
					<div class="box-title">
						<i class="fa icon-grid"></i> 选项类目
					</div>
					<div class="box-tools pull-right">
						<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
						<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
						<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新选项"><i class="fa fa-refresh"></i></button>
					</div>
				</div>
				<div class="ui-layout-content">
					<div id="tree" class="ztree"></div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="container-div ui-layout-center">
		<div class="row">
			<div class="col-sm-12 select-info">
				<form id="user-form">
					<input type="hidden" id="deptId" name="deptId">
	                <input type="hidden" id="parentId" name="parentId">
					<div class="select-list">
						<ul>
							<li class="time">
								<label>选择日期: </label>
								<input type="text" class="layui-input" id="conditionDate" placeholder="选择日期" name="conditionDate"/>
							</li>
							<li>
								<a id="query-btn" class="btn btn-primary btn-rounded btn-sm"><i class="fa fa-search"></i>&nbsp;搜索</a>
							   <!-- <a class="btn btn-success btn-rounded btn-sm" onclick="$.table.exportExcel()"><i class="fa fa-download"></i>&nbsp;下载</a>-->
							</li>
						</ul>
					</div>
				</form>
			</div>
	        <div class="col-sm-12 select-info table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true">
				</table>
			</div>
		</div>
	</div>
	<div th:include="include :: footer"></div>
	<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
	<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
	<script th:inline="javascript">
        var currentTreeId = 1;
		var date = new Date();
        var prefix = ctx + "module/teacher/work-report"
		var datas = [[${@dict.getType('sys_normal_disable')}]];
        var bootTableEle = $("#bootstrap-table");
        var conditionDateEle = $("#conditionDate");
        var paramDate = parseInt(date.getFullYear()) + "-" + parseInt(date.getMonth() + 1);
        $(function(){
            $('body').layout({ west__size: 185 });
            initTable();
            layui.use('laydate', function() {
                var laydate = layui.laydate;
                laydate.render({ elem: "#conditionDate", theme: 'molv',type: 'month' });
            });
            $("#query-btn").click(function(){
                againRenderTableTitle($("#deptId").val());
			});
        })

        function initTable(){
            getColumns(function(columns){
                queryUserList(columns);
                queryDeptTreeDaTa();
                //加载表格数据
                queryTableData();
            });
        }

        /**
         * 重新渲染表格标题 根据条件来渲染表格标题
         */
        function againRenderTableTitle(type){
            getColumns(function (columns) {
                bootTableEle.bootstrapTable('refreshOptions', {
                    columns: columns
                });
                queryTableData(type);
            },type);
        }

        /**
		 * 根据年份和月份查询-未填写默认使用当前年当前月
		 * */
        function queryTableData(type,year,month){
            type = type || 1;
            $.post([[@{/module/teacher/edu-work/list}]],{"date": conditionDateEle.val() || paramDate},function(data) {
                if(data && data != ""){
                    var bootTableData = getBootstrapDataByType(data,type);
					if(bootTableData){
                        bootTableEle.bootstrapTable('load',bootTableData);
                        return;
					}
                }
                layer.alert("没有查询到相关数据,如有疑问请联系教务科!");
            });
		}

		/**
		 * 根据Type类型来返回Bootstrap-table的数据
		 * @param teacher 后台获取到的teacher数据的实体
		 * @param type 要返回的数据的文件资料类型
		 **/
		function getBootstrapDataByType(teacher,type){
		    var teacherData = getTeacherDataByType(teacher,type);
		    if(teacherData){
                var bootTableData = {
                    total: 1,
                    rows: []
                }
		        var teacher = {};
                var teacherDataArray = JSON.parse(teacherData);
                teacherDataArray.forEach(function (item,index) {
                    var objKey = "cell_" + index;
                    for(key in item){
                        var value = key;
                        var topic = item[key];
                        if(topic){
                            teacher[objKey] = value ? value + "-" + topic : 0;
						}else{
                            teacher[objKey] = value || 0;
						}
                    }
                });
                bootTableData["rows"].push(teacher);
                return bootTableData;
            }
		}

        /**
		 * 根据Type从对象中取出数据
		 **/
		function getTeacherDataByType(teacher,type){
		    switch (parseInt(type)) {
				case 1:
					return teacher['dateTypeOne'];
				case 2:
                    return teacher['dateTypeTwo'];
				case 3:
                    return teacher['dateTypeThree'];
				case 4:
                    return teacher['dateTypeFour'];
				case 5:
                    return teacher['dateTypeFive'];
				case 6:
                    return teacher['dateTypeSix'];
			}
		}

        function queryUserList(columnArray) {
            var options = {
                exportUrl: prefix + "/export",
                sortName: "createTime",
                sortOrder: "desc",
                modalName: "教职工-工作情况",
                search: false,
                showExport: false,
                columns: columnArray
            }
            $.table.init(options);
        }

        function queryDeptTreeDaTa(){
            // 树结构初始化加载
            var setting = {view:{selectedMulti:false},data:{key:{title:"title"},simpleData:{enable:true}},
                //树形类目给点击的时候触发
                callback:{onClick:function(event, treeId, treeNode){
                        $("#deptId").val(treeNode.id);
                        $("#parentId").val(treeNode.pId);
                        againRenderTableTitle(treeNode.id);
                    }}
            }, tree, loadTree = function(){
                //这里是写死的因为就固定的这几个类目
                $.get([[@{/json/edu-work-menu.json}]], function(data) {
                    tree = $.fn.zTree.init($("#tree"), setting, data); //.expandAll(true);
                    // 展开第一级节点
                    var nodes = tree.getNodesByParam("level", 0);
                    for (var i = 0; i < nodes.length; i++) {
                        tree.expandNode(nodes[i], true, false, false);
                    }
                    // 展开第二级节点
                    nodes = tree.getNodesByParam("level", 1);
                    for (var i = 0; i < nodes.length; i++) {
                        tree.expandNode(nodes[i], true, false, false);
                    }
                }, null, null, "正在加载，请稍后...");
            };loadTree();

            $('#btnExpand').click(function() {
                tree.expandAll(true);
                $(this).hide();
                $('#btnCollapse').show();
            });
            $('#btnCollapse').click(function() {
                tree.expandAll(false);
                $(this).hide();
                $('#btnExpand').show();
            });
            $('#btnRefresh').click(function() {
                loadTree();
            });
        }

        /**
         * 将后台接收到的表格标题数据,包装成BootstrapTable可以识别的JSON格式
         */
        function renderBootstrapTableTitle(jsonTitleObj) {
            var columns = [];
            /**
			 * 格式化输出的数据 判断输出的值中是否带 "-" 带的话就代表是有注释的
			 * */
            function _bootTableValueFormatter(value){
                value = value || 0;
                if(value.toString().indexOf("-") > -1){
                	var splitArray = value.toString().split("-");
                    //return splitArray[0] + '<span title="'+ splitArray[1] +'" class="glyphicon glyphicon-comment hd-glyphicon-annotation"></span>';
                    return "<span title='" + splitArray[1] + "' style='border-bottom: 2px solid green;'>" + splitArray[0] + "</span>";
				}
                return value;
            }
            if(jsonTitleObj){
                var jsonObj = JSON.parse(jsonTitleObj.titleJson);
                var i = 0,len = jsonObj.length;
                for(; i < len; i++){
                    for(itemCellTitle in jsonObj[i]){
                        var tempObj = {
                            field: "cell_" + i,
                            title: itemCellTitle,
                            formatter: _bootTableValueFormatter
                        };
                        if (jsonObj[i][itemCellTitle] != "") {
                            tempObj.title += '<span class="glyphicon glyphicon-comment hd-glyphicon-annotation"></span>';
                            tempObj.titleTooltip = jsonObj[i][itemCellTitle];
                        }
                        columns.push(tempObj);
					}
				}
            }else{
                columns.push({
                    field: "empty",
                    title: "未查询到相关的数据"
                })
            }
            return columns;
        }

        /**
         * 请求后台地址,并拿到Title的JSON数据
         * @param callBackFn columns数据返回后的回调函数
         */
        function getColumns(callBackFn,type){
            type = type || 1;
            $.ajax({
                url:[[@{/module/edu/upload-data/title}]],
            data: {
                "date": conditionDateEle.val() || paramDate,
				"type": type
            },
            statusCode: {
                200: function(data){
                    if(data != ""){
                        var tempContainer;
                        var i = 0,len = data.length;
                        for(; i < len; i++){
                            //只取出加课汇总对应的数据
                            if(data[i].type == type){
                                tempContainer = data[i];
                                break;
                            }
                        }
                        var columns = renderBootstrapTableTitle(tempContainer);
                        callBackFn(columns);
					}else{
                        layer.alert('查询失败!可能没有录入该月份对应的数据');
					}
                },
                404: function(){
                    queryDeptTreeDaTa();
                    layer.alert('查询失败!可能没有录入该月份对应的数据');
                },
                500: function(){
                    layer.alert('服务器异常!请联系管理员处理.');
                }
            }
        });
        }
	</script>
</body>
</html>